<template>
  <div class="bg">

    <div class="body">

      <div class="state">
        <div style="float: right;padding:0 10px;"><svg t="1720254205975" class="icon" viewBox="0 0 1294 1024"
            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9091" width="20" height="20">
            <path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" fill="#ffffff" p-id="9092">
            </path>
            <path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" fill="#ffffff"
              p-id="9093"></path>
            <path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" fill="#ffffff"
              p-id="9094"></path>
            <path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" fill="#ffffff"
              p-id="9095"></path>
            <path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" fill="#ffffff" p-id="9096"></path>
          </svg>
          &nbsp;

          <svg t="1720254374345" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="13788" width="20" height="20">
            <path
              d="M791.272727 589.730909a159.185455 159.185455 0 1 0 159.185455 158.72A159.185455 159.185455 0 0 0 791.272727 589.730909z m0 279.272727a90.763636 90.763636 0 1 1 87.04-90.763636A93.090909 93.090909 0 0 1 791.272727 868.072727z"
              fill="#FFFFFF" p-id="13789"></path>
            <path
              d="M791.272727 729.832727a49.338182 49.338182 0 1 0 46.545455 49.338182 49.803636 49.803636 0 0 0-46.545455-49.338182zM904.378182 879.243636a176.407273 176.407273 0 0 1-113.105455 42.356364 174.545455 174.545455 0 0 1-114.967272-42.356364l-26.996364 59.578182a20.945455 20.945455 0 0 0 3.723636 20.014546 54.458182 54.458182 0 0 0 41.425455 15.36H884.363636a54.923636 54.923636 0 0 0 42.356364-16.756364 18.618182 18.618182 0 0 0 2.792727-19.549091z"
              fill="#FFFFFF" p-id="13790"></path>
            <path
              d="M828.974545 48.872727H195.025455A195.025455 195.025455 0 0 0 0 243.898182v390.050909a195.490909 195.490909 0 0 0 195.025455 195.025454h356.538181a12.101818 12.101818 0 0 0 12.101819-13.963636 547.374545 547.374545 0 0 1-6.981819-79.127273 235.52 235.52 0 0 1 219.694546-219.694545 261.585455 261.585455 0 0 1 225.28 125.672727 12.101818 12.101818 0 0 0 22.341818-6.050909V243.898182a195.025455 195.025455 0 0 0-195.025455-195.025455z m-78.661818 204.334546l-242.501818 272.290909a21.876364 21.876364 0 0 1-33.512727 0L356.538182 377.018182a22.341818 22.341818 0 0 0-35.374546 0L269.498182 451.025455a21.876364 21.876364 0 0 1-30.254546 5.12l-10.705454-7.447273A22.341818 22.341818 0 0 1 223.418182 418.909091l93.090909-134.050909a22.341818 22.341818 0 0 1 35.374545 0l122.88 153.6a21.876364 21.876364 0 0 0 33.512728 0l197.818181-222.021818a21.876364 21.876364 0 0 1 31.185455 0l9.309091 8.378181a22.341818 22.341818 0 0 1 3.723636 28.392728z"
              fill="#FFFFFF" p-id="13791"></path>
          </svg>
        </div>
        <div style="float: left;padding:0 10px">{{ newTime }}</div>
      </div>

      <!--捕获人脸区域-->
      <div class="videoCamera-canvasCamera">
        <video id="videoCamera" :width="videoWidth" :height="videoHeight" autoplay></video>
        <canvas style="display: none" id="canvasCamera" :width="videoWidth" :height="videoHeight"></canvas>
      </div>

      <h1 ref="myName">请进入识别区域</h1>
      <p>智慧社区综合管控系统出入门禁 </p>

      <div ref="fname" class="name"><img ref="faceImg" class="faceImg" src="" alt="">
        <h5 ref="faceName" class="faceName">小美</h5>
      </div>
    </div>
    <div>

      <!-- 按钮区域 -->
      <div class="face-btn" style="opacity: 0;">
        <button ref="myBtn" @click="faceVef()">{{ faceImgState ? '正在识别中...' : '开始识别' }}</button>
      </div>
      <!-- 消息区域
<div class="msg">
  <div class="server-msg">{{ msg }}</div>
  <div class="welcome">Welcome to face recognition</div>
</div> -->

    </div>


  </div>


</template>
<script>
import { fa, pa } from 'element-plus/es/locales.mjs';
import $camera from '../../../camera/index.js'
import { getFaceData, addAssessLog } from '@/api/face/faceTest.js'
export default {
  data() {
    return {
      form1: {
        id: null,
        name: null,
        personType: null,
        personId: null,
        assess: null,
        time: null,
        createTime: null,
        updateTime: null,
        remark: null
      },
      form: {},
      videoWidth: 450,
      videoHeight: 450,
      msg: '',
      faceImgState: false,
      faceOption: {},
      testData: {
        base: ''
      },
      newTime: "",
      n: ""
    };
  },
  mounted() {
    //调用摄像头
    this.faceOption = $camera.getCamera({
      videoWidth: 200,
      videoHeight: 200,
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      canvasId: 'canvasCamera',
      videoId: 'videoCamera'
    });
    let faceBtn = document.querySelector('.face-btn button');
    this.n = setInterval(function () {
      faceBtn.click()
    }, 3000)
    //this.getCompetence();

    this.getNowTime();//进入页面调用该方法获取当前时间
    clearInterval(myTimeDisplay);//销毁之前定时器
    var myTimeDisplay = setInterval(() => {
      this.getNowTime(); //每秒更新一次时间
    }, 1000);



  },

  methods: {

    // 调用后台接口
    faceVef() {
      // 开始绘制图片

      console.log(h);
      let imageBase = $camera.draw(this.faceOption)
      this.testData.base = imageBase

      let blob = $camera.dataURLtoBlob(imageBase)
      let file = $camera.blobToFile(blob, 'imgName')
      const formData = new FormData()
      formData.append('file', file)

      getFaceData(formData).then(res => {
        if (res.msg == "验证不成功") {
          this.$refs.myName.innerHTML = "验证失败"
          this.$refs.myName.style.color = '#fe2712'

          clearInterval(this.n);

          setTimeout(() => {
            this.$refs.myName.innerHTML = "请进入识别区域"
            this.$refs.myName.style.color = '#fff'
            this.n = setInterval(() => {
              this.$refs.myBtn.click();
            }, 3000);
          }, 4000)
        } else if (res.msg == "验证成功") {
          this.form = res.data;
          this.$refs.fname.style.opacity = 1
          this.$refs.myName.innerHTML = "验证成功,请通行"
          this.$refs.myName.style.color = '#1aff00'
          this.$refs.faceName.innerHTML = this.form.name
          let imgPath = 'http://localhost:8080' + this.form.faceImg
          this.$refs.faceImg.src = imgPath
          clearInterval(this.n);

          // 导入日志
          this.form1.name = this.form.name
          this.form1.personType = this.form.personType
          this.form1.personId = this.form.id
          this.form1.assess = 0
          addAssessLog(this.form1).then(response => {


          })
          setTimeout(() => {
            this.$refs.myName.innerHTML = "请进入识别区域"
            this.$refs.myName.style.color = '#fff'
            this.$refs.fname.style.opacity = 0
            this.n = setInterval(() => {
              this.$refs.myBtn.click();
            }, 3000);
          }, 4000)
        }


      })
    },

    getNowTime() {
      var date = new Date();
      var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
      this.newTime = time;
    },
    //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
    //小于10的拼接上0字符串
    addZero(s) {
      return s < 10 ? ('0' + s) : s;
    },

  },
};
</script>
<style scoped>
.bg {
  height: 100%;
  width: 100%;
  background-color: #5cb8752e
}

.body {
  /* padding: 10px 0; */
  width: 450.4px;
  height: 570px;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  border-radius: 4px;
  font-family: "趣圆黑";
  src: url('../../../assets/font/字魂创粗黑.ttf');
}

@font-face {
  font-family: "FSSinclair-Bold";
  src: url('../../../assets/font/FSSinclair-Bold.ttf');
}

@font-face {
  font-family: "趣圆黑";
  src: url('../../../assets/font/字魂创粗黑.ttf');
}

.body h1 {
  font-size: 40px;
  /* color: #1aff00; */
  color: #fff;
  font-family: "趣圆黑";
  margin-top: 22px;
  transition: all 0.1s;


}

.body p {

  color: #fff;
  font-family: "趣圆黑";
  margin-top: 26px;


}

.body .name {
  opacity: 0;
  /* border-radius: 6px 6px 0 0; */
  width: 100%;
  height: 100px;
  position: absolute;
  transition: all 0.4s;
  z-index: 20;
  top: 350px;
  background-image: linear-gradient(to top, #ffffffcf, #ffffff00);
}

.faceImg {
  position: relative;
  border-radius: 40px;
  width: 70px;
  height: 70px;
  left: -100px;
  top: 20px;

}

.faceName {

  position: relative;
  font-size: 30px;
  top: -85px;
}

.body .state {
  width: 100%;

  color: #fff;
  /* background-color: rgb(158, 107, 41); */
  position: absolute;
  /* height: 100px; */
  z-index: 30;

}


/* .videoCamera-canvasCamera {} */
</style>